<template>
  <div class="about">
    <div class="left_container">
      <div class="left_wrapper">
        <div v-for="(leftItem,index) in list"
        :key="index"
        :class="['left_item_container',selectIndex===index?'left_item_active':'']"
        @click="onClickLeftItem(index)">{{leftItem.title}}</div>
      </div>
    </div>
    <div class="right_container"
    ref="right">
      <div class="right_wrapper"
      @touchstart="onStart">
       <div v-for="(item,index) in list"
       :key="index"
       ref="rightItem">
          <div :style="{width:'100%',height:'60px',background:'pink',fontSize:'22px'}">{{index}}</div>
          <div>
            <div v-for="(rightItem,index) in item.children"
            :key="index"
            class="right_item_container">
              <div>{{rightItem.title}}</div>
              <div>{{rightItem.price}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  mounted(){
    axios.get("http://localhost:8080/data.json").then((res)=>{
      console.log(res);
      this.list = res.data.data;
      // this.currentItems = this.list[this.selectIndex].children;
    });

    this.$refs.right.addEventListener("scroll",this.onScroll)
  },
  data(){
    return{
      list:[],
      selectIndex:0,
      // currentItems:[]
    }
  },
  methods:{
    onClickLeftItem(index){
      this.$refs.right.removeEventListener("scroll",this.onScroll)
      this.selectIndex = index;
      // this.currentItems = this.list[this.selectIndex].children;
      let rightItems = this.$refs.rightItem;
      console.log(rightItems);
      let currentBlock = rightItems[this.selectIndex];

      currentBlock.scrollIntoView({behavior:'smooth'});
    },
    onScroll(){
  
      let rightItems = this.$refs.rightItem;
      // console.log("滚动距离：",this.$refs.right.scrollTop);
      let scrollTop = this.$refs.right.scrollTop;
      // console.log("视图高度：",this.$refs.right.scrollHeight)
      for(let index=0;index<rightItems.length;index++){
        let preELe = rightItems[index];
        let nextEle = rightItems[index+1];

        if(scrollTop>=rightItems[rightItems.length-1].offsetTop){
          this.selectIndex = rightItems.length-1;
          return;
        }
        if(scrollTop>=preELe.offsetTop&&scrollTop<nextEle.offsetTop){
          this.selectIndex  = index;
          console.log(this.selectIndex)
        }
        // let element = rightItems[index];
        // console.log(element.offsetTop) 
      
      }
    },
    onStart(){
      this.$refs.right.addEventListener("scroll",this.onScroll)
    }
  }
}
</script>

<style scoped>
.about
{
  width: 100%;
  height: 100vh;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.left_container
{
  width: 30%;
  height: 100%;
  overflow: scroll;
  /* border: 1px solid red; */
}

.right_container
{
  width: 70%;
  height: 100%;
  border: 1px solid blue;
  overflow:scroll;
}

.left_wrapper
{
  width: 100%;
}

.right_wrapper
{
  width: 100%;
}

.left_item_container
{
  width: 100%;
  height: 60px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  border-bottom: 1px solid lightgray;
}

.left_item_active
{
  border-left: 2px solid red;
}

.right_item_container
{
  width: 100%;
  height: 100px;
  border:1px solid blue;
}
</style>
